<template>
  <div class="box">
    <van-nav-bar title="您附近的饭店" left-arrow @click-left="onClickLeft" />
    <!-- 
        渲染店铺列表数据：每次加载10条数据，当触底的时候，继续加载10条件数据，一直到所有数据加载完成
     -->
    <van-list class="shop-list" v-model:loading="loading" :finished="finished" @load="onLoad" :offset="300">
      <template #default>
        <div class="shop-item" v-for="item in shopList" :key="item.businessId">
          <img :src="item.businessImg" alt="" />
          <p class="shop-item-name">{{ item.businessName }}</p>
          <div class="shop-item-price">
            配送费：{{ item.deliveryPrice }} 起送费：{{ item.startPrice }}
          </div>
          <van-button type="success" @click="goShop(item.businessId, item.businessName)">
            开始点餐
          </van-button>
        </div>
      </template>
      <template #finished>哥，俺是有底线滴^_^</template>
    </van-list>
    <van-back-top />
  </div>
</template>

<script>
import { getBusinessInfoListAPI } from "@/api/shop";
export default {
  data() {
    return {
      // 表示列表是否加载，如果正在加载需要将loading设置为true
      loading: false,
      // 表示列表的数据是否加载完成，如果没有加载完，设置为false，加载完成设置为true
      finished: false,
      // 店铺列表数据
      shopList: [],
      // 分页加载店铺列表的页码
      currentPage: 1,
      pageSize: 10,
    };
  },
  methods: {
    // 点击开始点餐的按钮
    goShop(businessId, businessName) {
      this.$router.push({
        path: "/shop",
        query: {
          businessId,
          businessName,
        },
      });
    },
    // 列表触底加载的方法
    onLoad() {
      // 进入这个函数，说明正在加载店铺的列表数据
      this.loading = true;
      // 使用axios，获取店铺列表数据
      getBusinessInfoListAPI({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((resp) => {
        if (resp.data.code == 20000) {
          this.shopList.push(...resp.data.datas);
          this.currentPage++;
          this.loading = false;
          // 如果数据全部加载完成，需要将finshed设置为true
          if (resp.data.datas.length < this.pageSize) {
            this.finished = true;
          }
        }
      });
    },
    // 页面顶部返回
    onClickLeft() {
      this.$router.back();
    },
  },
  created() {
    this.onLoad();
  },
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;

  .van-nav-bar {
    height: 46px;
  }

  // 店铺推荐样式
  .shop-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .shop-item {
      display: flex;
      flex-direction: column;
      width: calc(50% - 5px);
      text-align: center;
      margin-bottom: 10px;

      .shop-item-name {
        margin-top: 5px;
        font-weight: bold;
        color: #0078d4;
      }

      img {
        width: 100%;
      }

      .shop-item-price {
        color: #999;
        font-size: 12px;
        margin: 5px 0;
      }
    }
  }
}
</style>
